<template>
  <div class="page-component">
    <h3 class="page-title">
      经验
      <span class="pull-right">
        <el-button @click="add" type="primary" size="small">新增经验</el-button>
      </span>
    </h3>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="company" label="公司"> </el-table-column>
        <el-table-column prop="job" label="职位"> </el-table-column>
        <el-table-column prop="duty" label="职责"> </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleRowClick(scope.row, 'watch')"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              @click="handleRowClick(scope.row, 'edit')"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-popover
              :ref="scope.row.id"
              placement="top"
              width="160"
              style="margin-left: 10px"
            >
              <p>是否删除该数据？</p>
              <div style="text-align: right; margin: 0">
                <el-button
                  size="mini"
                  type="text"
                  @click="visibleDelCancel(scope.row.id)"
                  >取消</el-button
                >
                <el-button
                  type="primary"
                  size="mini"
                  @click="visibleDelSubmit(scope.row)"
                  >确定</el-button
                >
              </div>
              <el-button slot="reference" size="mini" type="text"
                >删除</el-button
              >
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 增加 s -->
    <el-dialog title="增加" :visible.sync="dialog.addVisible" width="47%">
      <el-form>
        <el-form-item label="公司">
          <el-input v-model="form.company"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input v-model="form.job"></el-input>
        </el-form-item>
        <el-form-item label="职责">
          <el-input type="textarea" :rows="6" v-model="form.duty"></el-input>
        </el-form-item>
        <el-button type="primary">保存</el-button>
      </el-form>
    </el-dialog>
    <!-- 增加 e -->
    <!-- 编辑 s -->
    <el-dialog
      :title="dialog.type == 'edit' ? '编辑' : '查看'"
      :visible.sync="dialog.editVisible"
      width="47%"
    >
      <el-form>
        <el-form-item label="公司">
          <el-input
            v-model="form.company"
            :disabled="dialog.type == 'watch'"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-input
            v-model="form.job"
            :disabled="dialog.type == 'watch'"
          ></el-input>
        </el-form-item>
        <el-form-item label="职责">
          <el-input
            type="textarea"
            :rows="6"
            v-model="form.duty"
            :disabled="dialog.type == 'watch'"
          ></el-input>
        </el-form-item>
        <el-button type="primary" v-if="dialog.type == 'edit'">保存</el-button>
      </el-form>
    </el-dialog>
    <!-- 编辑 e -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialog: {
        editVisible: false,
        addVisible: false,
        deleteVisible: false,
        type: "",
      },
      form: {
        company: "",
        job: "",
        duty: "",
      },
      tableData: [
        {
            id:'0',
          company: "2016-05-02",
          job: "王小虎",
          duty: "上海市普陀区金沙江路 1518 弄",
        },
        {
            id:'1',
          company: "2016-05-04",
          job: "王小虎",
          duty: "上海市普陀区金沙江路 1517 弄",
        },
        {
            id:'2',
          company: "2016-05-01",
          job: "王小虎",
          duty: "上海市普陀区金沙江路 1519 弄",
        },
        {
            id:'3',
          company: "2016-05-03",
          job: "王小虎",
          duty: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    handleRowClick(row, action) {
      this.dialog.type = action;
      this.dialog.editVisible = true;
      this.form = row;
    },
    add() {
      this.dialog.addVisible = true;
    },
    visibleDelCancel(id) {
      // 取消
      this.$refs[id].doClose();
      console.log(id);
    },
    visibleDelSubmit(rowData) {
      // 确定
      this.$refs[rowData.id].doClose();
      console.log(rowData);
      // 下面写 执行删除操作
    },
  },
};
</script>

<style lang="scss" scoped>
</style>